<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <div id="case">
            鼠标移入改变样式，移出回复
        </div>
    </div>
</body>

<script>
    //将两个需要用的盒子获取回来
    let zsc_case = document.getElementById('case')
    let zsc_box = document.getElementById('box')
        //给zsc_case盒子绑定划过事件
    zsc_case.onmouseover = function() {
            this.style.background = 'white' //当鼠标滑过让zsc_case盒子背景色变白
            this.style.color = 'red' //当鼠标滑过让zsc_case盒子字体颜色变红
            zsc_box.style.background = 'red' //让zsc_case它的父盒子背景变红
        }
        //绑定鼠标滑过事件
    zsc_case.onmouseout = function() {
        this.style.background = '' //当鼠标滑过让背景色和字体颜色清空
        this.style.color = ''
        zsc_box.style.background = ''
    }
</script>

</html>
<style>
    #box {
        width: 200px;
        height: 200px;
        margin: auto;
        background: black;
        color: white;
        position: relative;
    }
    
    #case {
        width: 150px;
        height: 150px;
        /* background: red; */
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>